<template>
	<view v-for="item in list " :key="item.id">
		<view class="uni-margin-wrap">
			<swiper class="swiper" autoplay>
				<swiper-item>
					<view class="swiper-item"><image class="img1" :src="item.img" mode=""></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image class="img1" :src="item.img2" mode=""></image></view>
				</swiper-item>
			</swiper> 
		</view>
		<view class="jg">
			<view class="j1">￥{{item.price}}</view>
			<view class="j2">{{item.name}}</view>
			<view class="j3">{{item.text}}</view>
		</view>
		<view class="kg"></view>
		<view class="yh" @click="placeOrder(item.id)">
			立即购买
		</view>
		<view class="appraise" @click="goXq">
			<view class="appraise_left">
				评价
			</view>
			<view class="appraise_right">
				<text>好评率99.1%</text>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<view class="xq">
			<view class="top">
				详情
			</view>
			<view class="tp">
				<image class="imgae" src="../../static/logo.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { getXq } from '/api/modules/orderGood.js'
import { reactive, toRefs } from 'vue'
const state = reactive({ list: [], id:'' })
// 页面加载
onLoad(options => {
	state.id = options.id
	xq()
})

const xq = async () => {
		const data  = await getXq(state)
		state.list = data
	} 
	
const goXq = () => {
	uni.navigateTo({
		url: '../comment/comment'
	})
}
const placeOrder = (id) => {
	uni.navigateTo({
		url: `../Confirm order/Confirm order?id=${id}`
	})
}
// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { list, id } = toRefs(state)
</script>

<style lang="scss">
.uni-margin-wrap {
	.swiper {
		width: 750rpx;
		height: 560rpx;
		.swiper-item {
			width: 100%;
			height: 100%;
			.img1 {
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
}
.jg {
	padding: 40rpx;
	font-size: 40rpx;
	font-weight: 600;
	.j1 {
		color: red;
	}
	.j3 {
		font-size: 15px;
		color: #ccc;
	}
}
.kg {
	height: 20rpx;
	background-color: #eee;
}
.yh {
	width: 650rpx;
	position: fixed;
	bottom: 0;
	height: 100rpx;
	line-height: 100rpx;
	background-color: red;
	color: #fff;
	left: 50rpx;
	border-radius: 20rpx;
	text-align: center;
}
.xz {
	padding: 20rpx;
	.dz {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		.d1 {
			display: flex;
			.left {
				margin-right: 20rpx;
				font-weight: 700;
			}
			.right {
				color: #ccc;
			}
		}
	}
}
.xq {
	padding: 20rpx 0;
	.top {
		text-align: center;
		font-weight: 700;
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}
	.tp {
		width: 750rpx;
		height: 560rpx;
		.imgae {
			width: 100%;
			height: 100%;
		}
	}
}
.appraise{
	margin-top: 20rpx;
	height: 100rpx;
	.appraise_left{
		float: left;
	}
	.appraise_right {
		float: right;
	}
}
</style>
